<template>
  <el-container class="header-wrapper">
    <el-aside class="logo">
      <video id="logo-video" :poster="data.videoUrl" autoplay muted loop
             playsinline type="video/mp4" :src="data.videoUrl"></video>
    </el-aside>
    <el-container class="content">
      <el-empty :description="$t('mes.noDataYet')" v-if="!data.processCount"/>
      <el-row :gutter="10" style="width: 100%;" v-else>
        <el-col :span="4">
          <process-fieldset :url="data.icon1" :name="data.currentProcess"></process-fieldset>
        </el-col>
        <el-col :span="4">
          <common-fieldset :title="$t('wms.extrusionQualified')">
            <div class="row-wrapper">
              <div class="image-box">
                <img src="http://screen.bjdnlsj.com/afl-app/img/202212131056110906_admin.png">
              </div>
              <div class="numberWrapper">
                <span class="number">{{ data.processCount.successQty || 0}}</span>
                <span class="unit"> pcs</span>
              </div>
            </div>
          </common-fieldset>
        </el-col>
        <el-col :span="4">
          <common-fieldset :title="$t('wms.squeezeOut')">
            <div class="row-wrapper">
              <div class="image-box">
                <img src="http://screen.bjdnlsj.com/afl-app/img/202212131055450794_admin.png">
              </div>
              <div class="numberWrapper">
                <span class="number">{{ data.processCount.errorQty || 0}}</span>
                <span class="unit"> pcs</span>
              </div>
            </div>
          </common-fieldset>
        </el-col>
      </el-row>
    </el-container>
  </el-container>
</template>

<script setup>
import processFieldset from '@/components/mes/common/processFieldset'
import config from '@/config/index'
import { reactive, ref, watch, onMounted, defineProps } from 'vue'
import commonFieldset from '@/components/common/commonFieldset'
import { CountTo } from 'vue3-count-to'
import iconFont from '@/components/IconFont/iconFont'
import { processInputOutputTotal } from '@/api/mesApi'

const data = reactive({
  videoUrl: config.ossUrl + '/afl-data-screen/images/job.mp4',
  icon1: config.ossUrl + '/afl-data-screen/images/icon-screen.png',
  textClass: '',
  currentProcess: 'Extrusion',
  processCount: '',
  classes: '',
  period: []
})

onMounted(() => {
  processTotal()
  setTime()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await processTotal()
  }, 6000)
}

const props = defineProps({
  classes: { type: String },
  period: { type: Array },
  lineCode: { type: String }
})

watch(() => [props.classes, props.period, props.lineCode], () => {
  // console.log(props.classes, props.period[0], props.period[1])
  data.classes = props.classes
  data.period = props.period
  // console.log(data.period[0], data.period[1])
  if (data.period[0] !== undefined && data.period[0].length === undefined) {
    data.period[0] = data.period[0].toLocaleDateString()
    data.period[1] = data.period[1].toLocaleDateString()
  }
  // getJJGTabulateDataList()
  processTotal()
})
const processTotal = () => {
  processInputOutputTotal({
    processCode: 'JC',
    mesProduceDate: data.period[0] || '', // 开始时间
    mesProduceDate1: data.period[1] || '', // 结束时间
    shiftCode: data.classes === 'All' ? '' : data.classes, // 班次
    lineCode: props.lineCode // 条线
  }).then(res => {
    if (res.status === 200 && res.data != null) {
      // console.log(res)
      data.processCount = res.data.JCMap
    }
  })
}
</script>

<style scoped lang="scss">

.header-wrapper {
  height: 100%;
  border-bottom: 3px solid #7952B3;

  .content {
    padding: 10px;
  }
}

.logo {
  width: 300px;
  overflow: hidden;
  /*background: url("@/images/numberBg1.png") no-repeat;*/
  /*background-size: 100% 100%;*/
  /*padding: 0;*/
  /*text-align: center;*/
}

#logo-video {
  width: 250px;
  height: 100%;
  mix-blend-mode: darken;
}

.row-wrapper {
  display: flex;
  flex-direction: row;

  .image-box {
    text-align: center;
    padding-top: 5px;
    //padding-left: 5px;
    flex: 0 0 40%;
    border-right: 1px solid #e3e3e3;

    img {
      height: 70px
    }
  }

  .numberWrapper {
    flex: 1 auto;
    font-size: 13px;
    line-height: 90px;
    margin-left: 5px;
    text-align: center;

    .number {
      font-size: 30px;
    }
  }
}
</style>
